import React from "react";
import {connect} from 'dva';
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {Card} from "antd";
import moment from 'moment';

// @author:lf20210705文章详情
@connect(({topicDetail}) => ({topicDetail}))

export default class Topics extends React.Component {
  componentDidMount() {
    this.props.dispatch({
      type: 'topicDetail/overrideStateProps',
      payload: {id: this.props.match.params.id}
    });
    this.props.dispatch({type: 'topicDetail/getDetail'});
    this.props.dispatch({type: 'topicDetail/getComments'})
  }

  render() {
    const {topicDetail} = this.props;
    const {topic, comments} = topicDetail;
    // eslint-disable-next-line no-console
    console.log('topic, comments:', topic, comments);
    return (
      <PageHeaderWrapper title={false}>
        <Card
          title={topic.title}
          extra={`${topic.user_name}写于：${moment(topic.create_time).format('YYYY年MM月DD日 HH时MM分SS秒')}`}>
          <p dangerouslySetInnerHTML={{__html: topic.body}}/>
        </Card>
      </PageHeaderWrapper>
    )
  }
}

